import React, { Component } from 'react'
import { Button, Modal, Form, Tabs, message} from 'antd'
import TransferComponent from './TransferComponent'
import { fetchData } from '../../components/AjaxConsumer'

const TabPane = Tabs.TabPane;

export default class ModalTransfer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            fetchDataBackData:[],
            submitData: {},
            activekey: '0'
        };
    }
    showModal = (url) => {
        //在这里初始化值
        const options= {
            // url:url,
            url: '/getModalTabTransferData',
            type: 'get',
            condition:{
                
            }
        };
        fetchData(this,options,(res)=>{
            //回调函数
            if(res.code == 1) {
                let submitData = {};
                res.data.map((e,index)=>{
                    submitData[e.tabCode] = e.tabSelectList.map((ee,eindex)=>{
                        return (
                            ee.key
                        )
                    })
                })
                this.setState({
                    fetchDataBackData: res.data,
                    submitData:submitData,
                    visible:true,
                })
            } else {
                //失败
            }
        })
    }
    handleCancel = () => {
        //模态框消失，tab页默认回到第一个
        this.setState({ visible: false, activekey: '0' });
    }
    //内部穿梭框改变的时候，需用此方法将tab以及相应的选中值回调
    getTransferSubmitData = (tabName,targetKeys) => {
        let submitData = this.state.submitData;
        submitData[tabName] = targetKeys;
        this.setState({
            submitData
        })
    }
    handleOk = () => {
        let submitData = this.state.submitData;
        const options= {
            url: '/deleteAction',
            type: 'post',
            condition:{
                submitData
            }
        };
        fetchData(this,options,(res)=>{
            //回调函数
            if(res.code == 1) {
                message.success('操作成功')
                //模态框消失，tab页默认回到第一个
                this.setState({ visible: false, activekey: '0' });
            } else {
                message.error('操作失败')
            }
        })
    }
    //点击切换tab页的时候进行记录
    callback = (key) => {
        console.log(key);
        this.setState({
            activekey: key
        })
    }
    render() {
        let fetchDataBackData = this.state.fetchDataBackData;
        let tempNode;
        tempNode = <Tabs defaultActiveKey='0' activeKey={this.state.activekey} onChange={this.callback}>
                    {
                        fetchDataBackData.map((e,index)=>{
                            return (
                                <TabPane  tab={e.tabName} key={index}>
                                    <TransferComponent 
                                        tabCode={e.tabCode}  
                                        initTabAllList={e.tabAllList}
                                        initTabSelectList={e.tabSelectList}
                                        getTransferSubmitData={this.getTransferSubmitData}
                                        isTransferComponent={this.state.visible}
                                    />
                                </TabPane >
                            )
                        })
                    }
                </Tabs>
        return(
            <div>
                <Button type="primary" onClick={this.showModal}>
                    Open modal dialog
                </Button>

                <Modal
                    style={{top: '20px'}}
                    visible={this.state.visible}
                    title="自定义表单"
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={'850px'}
                    footer={[
                        <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
                        <Button key="submit" type="primary" onClick={this.handleOk}>
                        确定
                        </Button>,
                    ]}
                    maskClosable={false}>
                    <Form
                        onSubmit={this.handleSubmit}
                        style={{
                        paddingTop: '20px',
                        paddingBottom: '20px'
                    }}>
                        <div style={{marginTop:'-20px'}}>
                            {tempNode}
                        </div>
                    </Form>
                </Modal>
            </div>
        )
    }
}
